<template>
  <view class="ranking-table">
    <!-- 表头部分 - 可由外部控制显示 -->
    <view class="table-header">
      <template v-for="(header, key) in headers" :key="key">
        <text class="table-col" :style="getColumnStyle(key)">
          {{ header }}
        </text>
      </template>
    </view>

    <!-- 表体部分 - 可由外部控制显示 -->
    <view class="table-body">
      <!-- 空数据提示 -->
      <view v-if="data.length === 0 && showEmpty" class="empty-state">
        {{ emptyText }}
      </view>

      <!-- 数据行 -->
      <template v-else>
        <view
          v-for="(item, index) in data"
          :key="index"
          class="table-row"
          :class="{ 'row-hover': isHover && index === hoverIndex }"
          @click="handleRowClick(item, index)"
          @touchstart="hoverIndex = index"
          @touchend="hoverIndex = -1"
        >
          <template v-for="(header, key) in headers" :key="key">
            <text class="table-col" :style="getColumnStyle(header)">
              {{ item[key] || "--" }}
            </text>
          </template>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref, computed } from "vue";

// 定义组件接收的属性
const props = defineProps({
  // 表格数据
  data: {
    type: Array,
    required: true,
    default: () => [],
  },

  // 表头配置
  headers: {
    type: Object,
    default: () => ({
      area: "时间",
      data: "发生地点",
      rank: "事件类型",
      rate: "处置状态",
    }),
  },

  // 列样式配置
  columnStyles: {
    type: Object,
    default: () => ({
      // 可以针对不同列设置样式，例如：
      // area: { flex: 1.2, textAlign: 'left' },
      // data: { flex: 1.5 },
    }),
  },

  // 是否显示空数据提示
  showEmpty: {
    type: Boolean,
    default: true,
  },

  // 空数据提示文本
  emptyText: {
    type: String,
    default: "暂无数据",
  },

  // 是否启用行悬停效果
  isHover: {
    type: Boolean,
    default: false,
  },
});

// 定义组件发出的事件
const emit = defineEmits(["row-click", "row-dblclick", "row-contextmenu"]);

// 当前悬停的行索引
const hoverIndex = ref(-1);

// 获取列样式
const getColumnStyle = (columnKey) => {
  return (
    props.columnStyles[columnKey] || {
      flex: 1,
      textAlign: "center",
    }
  );
};

// 获取单元格值
const getCellValue = (item, columnKey) => {
  const fieldKey = props.fieldMappings[columnKey];
  // 优先使用映射的字段，如果不存在则使用原始字段名
  return item[fieldKey] !== undefined ? item[fieldKey] : item[columnKey];
};

// 处理行点击事件
const handleRowClick = (item, index) => {
  uni.navigateTo({
    url: `/pages/detail/index?id=${item["案件id"]}&code=${item["案件标识"]}`,
  });
};
</script>

<style lang="scss" scoped>
.ranking-table {
  box-sizing: border-box;

  // 表头样式
  .table-header {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: 600;
    color: #666;
    background: #f8f9fa;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }

  // 表体样式
  .table-body {
    width: 100%;
  }

  // 行样式
  .table-row {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
    font-size: 24rpx;
    border-bottom: 1rpx solid #f0f0f0;
    transition: background-color 0.2s;
    width: 100%;

    &:active {
      background-color: #f8f9fa;
    }

    &.row-hover {
      background-color: #f8f9fa;
    }
  }

  // 单元格样式
  .table-col {
    flex: 1;
    text-align: center;
    padding: 0 8rpx;
    box-sizing: border-box;
  }

  // 空数据状态
  .empty-state {
    padding: 60rpx 0;
    text-align: center;
    color: #999;
    font-size: 24rpx;
  }
}
</style>
